

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/public/layui/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/public/layui/admin/style/admin.css" media="all">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <style type="text/css">
      *{
          margin:0px;
          padding:0px;
      }
      body, button, input, select, textarea {
          font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
      }
      #info{
          width:603px;
          padding-top:3px;
          overflow:hidden;
      }
      .btn{
          width:112px;
      }
      #map-container{
        width:100%;
        height:550px;
      }

      #ulop{
        width: 240px;
        height: 50px;
        line-height: 44px;
        text-align: center;
      }

      .opitem{ 
          width: 80px;
          float:left; /* 往左浮动 */
      }
    </style>
</head>
<body onload="init()">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                  <div class="layui-card">
                    <!-- <div class="layui-card-header">数据概况</div> -->
                    <div class="layui-card-body">
                      <div class="layadmin-backlog">
                          <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs1">
                              <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                                <h3>在线司机</h3>
                                <p><cite>{{data.driver_online}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs1">
                              <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                                <h3>本日订单</h3>
                                <p><cite>{{data.order_today}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs1">
                              <a lay-href="template/goodslist.html" class="layadmin-backlog-body">
                                <h3>新增用户</h3>
                                <p><cite>{{data.user_today}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs1">
                              <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
                                <h3>累计订单</h3>
                                <p><cite>{{data.order_total}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs1">
                              <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
                                <h3>累计用户</h3>
                                <p><cite>{{data.user_total}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs1">
                              <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                                <h3>司机总数</h3>
                                <p><cite>{{data.driver_total}}</cite></p>
                              </a>
                            </li>
                          </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-header">快捷方式</div>
                    <div class="layui-card-body">
                      <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                         <div carousel-item> --
                          <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs3">
                              <a lay-href="home/homepage1.html">
                                <i class="layui-icon layui-icon-console"></i>
                                <cite>大屏显示</cite>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a lay-href="home/homepage2.html">
                                <i class="layui-icon layui-icon-chart"></i>
                                <cite>订单管理</cite>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a lay-href="component/layer/list.html">
                                <i class="layui-icon layui-icon-template-1"></i>
                                <cite>司机管理</cite>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a lay-href="user/user/list.html">
                                <i class="layui-icon layui-icon-user"></i>
                                <cite>用户管理</cite>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a lay-href="set/system/website.html">
                                <i class="layui-icon layui-icon-set"></i>
                                <cite>系统设置</cite>
                              </a>
                            </li>
                          </ul>
                        </div> --
                      </div>
                    </div>
                  </div>
                </div> -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <!-- <div class="layui-card-header">实时地图</div> -->
                        <div class="layui-card-body">
                            <div id="map-container"></div>
                            <!-- <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/public/layui/admin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/public/layui/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index','console');

    function escape2Html(str) {
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }

    var drivers = '{{data.locations}}';
    var locations = [];
    if(drivers){
         locations = JSON.parse(escape2Html(drivers));
    }
    console.log(locations);


    var init = function() {
        var center = new qq.maps.LatLng(23.550140,116.373367);
        var map = new qq.maps.Map(document.getElementById('map-container'),{
            center: center,
            zoom: 11
        });

        //添加到提示窗
        var info = new qq.maps.InfoWindow({
            map: map
        });

        for (var i =0;i < locations.length ;i ++ ) {
            (function() {
                var driverloc = new qq.maps.LatLng(locations[i].Lat, locations[i].Lng);
                var marker = new qq.maps.Marker({
                    position: driverloc,
                    map: map,
                });

                var anchor = new qq.maps.Point(10, 30),
                    size = new qq.maps.Size(42, 68),
                    origin = new qq.maps.Point(0, 0),
                    markerIcon = new qq.maps.MarkerImage(
                        "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
                        size,
                        origin,
                        anchor
                    );
                marker.setIcon(markerIcon);
                var label = new qq.maps.Label({
                    position: driverloc,
                    map: map,
                    content: locations[i].Rname
                });

                var dv = locations[i];
                var wstt = dv.OnServing == 0 ? '未接单':'服务中';
                qq.maps.event.addListener(marker, 'click', function () {
                    info.open();
                    info.setContent(
                        '<div style="text-align:left;white-space:nowrap;margin:10px;">' +
                        '<div>姓名:' + dv.Rname + '</div>' +
                        '<div>电话:' + dv.Mobile + '</div>' +
                        '<div>状态:' + wstt + '</div>' +
                        '</div>'
                    );
                    // info.setContent('<div style="text-align:center;white-space:'+'nowrap;margin:10px;">这是第 ' + dv.Rname + ' 个标注</div>');
                    info.setPosition(driverloc);
                });
            })(i);
        }


       /*  增加自定义组件
       function CustomZoomControl(controlDiv, map) {
            controlDiv.style.padding = "5px 10px";
            controlDiv.style.backgroundColor = "#FFFFFF";
            controlDiv.style.border = "2px solid #86ACF2";
            controlDiv.style.width = "100px";

            controlDiv.index = 1;//设置在当前布局中的位置

            function update() {
                var currentZoom = map.getZoom();
                controlDiv.innerHTML = ''
                + '司机列表<br/>'
                + '<a href="javascript:onDriverClick(1)">1.司机1<hr></a>'
                + '<a href="javascript:onDriverClick(2)">2.司机2<hr></a>'
                + '<a href="javascript:onDriverClick(3)">3.司机3<hr></a>'
                + '<a href="javascript:onDriverClick(4)">4.司机4<hr></a>'
                + '<a href="javascript:onDriverClick(5)">5.司机5<hr></a>'
                + '<a href="javascript:onDriverClick(6)">6.司机6<hr></a>'
                qq.maps.event.trigger(controlDiv, "resize");
            }

            update();
            //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
            qq.maps.event.addDomListener(map, "zoom_changed", update);
        }

        //创建div元素
        var customZoomDiv = document.createElement("div");
        //获取控件接口设置控件
        var customZoomControl = new CustomZoomControl(customZoomDiv, map);
        //将控件添加到controls栈变量并将其设置在顶部位置
        map.controls[qq.maps.ControlPosition.RIGHT_CENTER].push(customZoomDiv);



        function CustomZoomControl2(controlDiv, map) {
            controlDiv.style.padding = "5px 10px";
            controlDiv.style.backgroundColor = "#FFFFFF";
            controlDiv.style.border = "2px solid #86ACF2";
            // controlDiv.style.width = "100px";

            controlDiv.index = 2;//设置在当前布局中的位置

            function update() {
                var currentZoom = map.getZoom();
                controlDiv.innerHTML = ''
                +'<div id="ulop">'
                +'    <div class="opitem">司机信息</div>|'
                +'    <div class="opitem">订单信息</div>|'
                +'    <div class="opitem">轨迹重演</div>'
                +'</ul>';
                qq.maps.event.trigger(controlDiv, "resize");
            }

            update();
            //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
            qq.maps.event.addDomListener(map, "zoom_changed", update);
        }

        //创建div元素
        var customZoomDiv2 = document.createElement("div");
        //获取控件接口设置控件
        var customZoomControl = new CustomZoomControl2(customZoomDiv2, map);
        //将控件添加到controls栈变量并将其设置在顶部位置
        map.controls[qq.maps.ControlPosition.BOTTOM_CENTER].push(customZoomDiv2);*/
    }

</script>
</body>
</html>

